{extend name="base" /}

{block name="script"}

{js file="__STATIC__/js/main/jquery-ui.min.js"}
{js file="__STATIC__/js/plugins/trees/fancytree-all.min.js"}
{/* js file="__STATIC__/js/plugins/trees/fancytree-childcounter.js" */}

<script>
	var jsonSource = '{:url("index/json")}';

    $(function(){
        // Basic example
        $('.tree-default').fancytree({
            init: function(event, data) {
                $('.has-tooltip .fancytree-title').tooltip();
            }
        });

        // Load JSON data
        $('.tree-ajax').fancytree({
            checkbox: true,
            selectMode: 3,
            source: {
                url: jsonSource
			},
            init: function(event, data) {
                $('.has-tooltip .fancytree-title').tooltip();
            }
        });

        // Hierarchical select
        $('.tree-checkbox-hierarchical').fancytree({
            checkbox: true,
            selectMode: 3
        });

        //
        // Table tree
        //
        $('.tree-table').fancytree({
            extensions: ['table'],
            checkbox: true,
            table: {
                indentation: 20,      // indent 20px per node level
                nodeColumnIdx: 2,     // render the node title into the 2nd column
                checkboxColumnIdx: 0  // render the checkboxes into the 1st column
            },
            source: {
                url: jsonSource
            },
            // lazyLoad: function(event, data) {
            //     data.result = {
            //         url: 'ajax-sub2.json'
            //     }
            // },
            renderColumns: function(event, data) {
                var node = data.node,
                    $tdList = $(node.tr).find('>td');

                // (index #0 is rendered by fancytree by adding the checkbox)
                $tdList.eq(1).text(node.getIndexHier()).addClass('alignRight');

                // (index #2 is rendered by fancytree)
                $tdList.eq(3).text(node.key);
                $tdList.eq(4).addClass('text-center').html('<input type="checkbox" class="form-input-styled" name="like" value="' + node.key + '">');

                // Style checkboxes
                //$('.form-input-styled').uniform();
            }
        });

        // Handle custom checkbox clicks
        $('.tree-table').on('input[name=like]', 'click', function(e) {
            var node = $.ui.fancytree.getNode(e),
                $input = $(e.target);
            e.stopPropagation(); // prevent fancytree activate for this row
            if($input.is(':checked')){
                alert('like ' + $input.val());
            }
            else{
                alert('dislike ' + $input.val());
            }
        });
    });
</script>

{/block}

{block name="content"}

<!-- Initialization options -->
<div class="mb-3">
	<h6 class="mb-0 font-weight-semibold">
		用户组权限设置
	</h6>
	<span class="text-muted d-block">选择设置用户组<code>管理员</code>相关权限。</span>
</div>

<div class="row">
	<div class="col-md-4">

        <!-- 管理列表 -->
        <div class="card">
            <div class="card-header bg-transparent header-elements-inline">
                <h5 class="card-title">管理组</h5>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                    </div>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action">
                    <span class="font-weight-semibold">
                        <i class="icon-people mr-2"></i>普通用户
                    </span>
                    <span class="mi-keyboard-arrow-right ml-auto"></span>
                </a>
                <a href="#" class="list-group-item list-group-item-action active">
                    <span class="font-weight-semibold">
                        <i class="icon-people mr-2"></i>游客组
                    </span>
                    <span class="icon-arrow-right5 ml-auto"></span>
                </a>
                <a href="#" class="list-group-item list-group-item-action disabled">
                    <span class="font-weight-semibold">
                        <i class="icon-people mr-2"></i>编辑
                    </span>
                    <span class="mi-keyboard-arrow-right ml-auto"></span>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <span class="font-weight-semibold">
                        <i class="icon-people mr-2"></i>网站审查
                    </span>
                    <span class="mi-keyboard-arrow-right ml-auto"></span>
                </a>
            </ul>
        </div>
	</div>

	<div class="col-md-8">

		<!-- Load JSON data -->
		<div class="card">
			<div class="card-header header-elements-inline">
				<h5 class="card-title">`管理员`权限设置</h5>
				<div class="header-elements">
					<div class="list-icons">
						<a class="list-icons-item" data-action="collapse"></a>
						<a class="list-icons-item" data-action="reload"></a>
					</div>
				</div>
			</div>

			<div class="card-body">
				<p class="mb-3">选择设置用户组 <code>管理员</code> 相关权限。</p>

				<div class="tree-ajax card card-body border-left-info border-left-2"></div>
			</div>
		</div>
		<!-- /load JSON data -->

	</div>

</div>


<div class="row">
    <!-- Table tree -->
    <div class="card">
        <div class="card-header header-elements-inline">
            <h6 class="card-title">Table tree</h6>
            <div class="header-elements">
                <div class="list-icons">
                    <a class="list-icons-item" data-action="collapse"></a>
                    <a class="list-icons-item" data-action="reload"></a>
                    <a class="list-icons-item" data-action="remove"></a>
                </div>
            </div>
        </div>

        <div class="card-body">
            The following example demonstrates rendered tree as a table (aka tree grid) and support keyboard navigation in a grid with embedded input controls. Table functionality is based on Fancytree's <code>table.js</code> extension. The tree table extension takes care of rendering the node into one of the columns. Other columns have to be rendered in the <code>renderColumns</code> event.
        </div>

        <div class="table-responsive">
            <table class="table table-bordered tree-table">
                <thead>
                <tr>
                    <th style="width: 46px;"></th>
                    <th style="width: 80px;">#</th>
                    <th>Items</th>
                    <th style="width: 80px;">Key</th>
                    <th style="width: 46px;">Like</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- /table tree -->
</div>

{/block}